<template>
  <div>
    <aside class="testimage">
      
      <!-- 顶部部分 -->
      <header class="wrap">
        <div class="img" @click="callback">
          <img src="../../../assets/images/skd-image/arrow.png" alt="" />
        </div>
        <span>我的测肤图像</span>
      </header>

      <!-- banner部分 -->
      <div class="banner">
        <!-- banner内部的背景部分 -->
        <img src="../../../assets/images/skd-image/beijing.png" alt="" />
        <div class="wenzi" v-for="item in wenziList" :key="item">
          {{ item }}
        </div>
        <!-- banner内部的日历部分 -->
        <div class="img2">
          <img src="../../../assets/images/skd-image/rili.png" alt="" />
        </div>
        <!-- banner内部的卡通部分 -->
        <div class="img1">
          <img src="../../../assets/images/skd-image/katong.png" alt="" />
        </div>
      </div>

      <!-- 测肤部分 -->
      <div class="skin">
        <!-- 测肤内部天数部分 -->
        <div class="date" v-for="value in dateList" :key="value">
          {{ value }}
        </div>
        <br />
        <!-- 测肤内部文字部分 -->
        <div class="words" v-for="items in tryList" :key="items">
          {{ items }}
        </div>
        <!-- 点击测肤部分 -->
        <div class="button">点击测肤</div>
      </div>
      
      <!-- 轮播图组件部分 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :loop="true">
        <van-swipe-item v-for="item in carouselLsit" :key="item">
          <img :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>

    </aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wenziList: ["测肤图像记录达到3天，即可开启功能！"],
      dateList: ["1天", "2天", "3天"],
      tryList: ["今日未测肤", "", ""],
      carouselLsit: [
        {
          img: require("@/assets/images/skd-image/lunbo1.png"),
        },
        {
          img: require("@/assets/images/skd-image/lunbo2.png"),
        },
        {
          img: require("@/assets/images/skd-image/lunbo3.png"),
        },
      ],
    };  
  },
  methods:{
    callback(){
      this.$router.push("/home/mine");
    }
  }
};
</script>

<style lang="less" scoped>
/* 背景图渐变样式 */
.testimage {
  width: 100%;
  height: 747px;
  background: -webkit-linear-gradient(top, #b5edec 0%, #fdfcea 100%);
  position: fixed;
  left: 0;
  top: 0;
}

/* 顶部样式 */
.wrap {
  width: 100%;
  height: 50px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;

  /* 顶部左箭头样式 */
  .img {
    width: 13px;
    height: 23px;
    position: absolute;
    left: 15px;
    top: 12px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  /* 顶部文字样式 */
  span {
    position: absolute;
    font-weight: bold;
    left: 135px;
    top: 15px;
    font-size: 16px;
  }
}

/* banner样式 */
.banner {
  width: 100%;
  height: 129px;
  margin-top: 50px;
  position: relative;
  z-index: -99;
  img {
    width: 100%;
    height: 100%;
  }

  /* banner内部文字样式 */
  .wenzi {
    width: 167px;
    height: 40px;
    position: absolute;
    left: 17px;
    top: 30px;
    font-size: 15px;
    color: #1c898b;
    text-align: left;
  }
  /* banner内部img1样式 */
  .img1 {
    width: 92px;
    height: 72px;
    position: absolute;
    left: 219px;
    top: 25px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  /* banner内部img2样式 */
  .img2 {
    width: 73px;
    height: 54px;
    position: absolute;
    top: 16px;
    left: 282px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

/* 测肤样式 */
.skin {
  width: 344px;
  height: 108px;
  position: relative;
  background: #fff;
  margin: auto;
  margin-top: -34px;
  border-radius: 10px;

  /* 测肤内部天数样式 */
  .date {
    width: 33px;
    height: 33px;
    float: left;
    line-height: 33px;
    margin-left: 60px;
    margin-top: 10px;
    color: #999;
    font-size: 12px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
  }

  /* 测肤内部底部文字样式 */
  .words {
    width: 75px;
    height: 11px;
    float: left;
    font-size: 10px;
    color: #999;
    margin-left: 40px;
  }

  /* 点击测肤样式 */
  .button {
    height: 25px;
    line-height: 25px;
    width: 71px;
    border-radius: 30px;
    position: absolute;
    left: 10px;
    top: 70px;
    font-size: 12px;
    background: -webkit-linear-gradient(right, #6ac1cd 0%, #84a3dd 100%);
    text-align: center;
  }
}

/* 轮播图组件样式 */
 .my-swipe .van-swipe-item {
  padding:0 31px;
  height:354px;
  color: #fff;
  font-size: 20px;
  margin-top: 35px;
  line-height: 354px;
  text-align: center;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>